﻿import QtQuick 2.0

Item{
    // 单个菜单项总宽度
    property int menuItemWidth: 150
    // 菜单项左侧小图标宽度
    property int menuIconWidth: 20
    // 菜单项左侧小图标左右边距
    property int menuIconLRMargin: 14
    // 菜单文字区域宽度
    property int menuTextWidth: 100
    // 单个菜单项总高度
    property int menuItemHeight: 50
    // 菜单项左侧小图标高度
    property int menuIconHeight: 20
    // 菜单项左侧小图标上下边距
    property int menuIconTBMargin: 14
    // 菜单文字区域高度
    property int menuTextHeight: 50
    // 菜单文字字体
    property string menuTextFont: "微软雅黑"
    // 菜单文字大小
    property int menuTextSize: 16
    property string menuText: ""
    // 图标地址
    property alias icoSource: icon.source
    property color normalColor: "#FFF"
    property color hoverColor: "#5be7c4"
    //5be7c4
    width: menuItemWidth
    height: menuItemHeight
    //图标
//    Rectangle{
//        id: icon
//        width: menuIconWidth
//        height: menuIconHeight
//        anchors.left: parent.left
//        anchors.top: parent.top
//        anchors.bottom: parent.bottom
//        anchors.leftMargin: menuIconLRMargin
//        anchors.topMargin: menuIconTBMargin
//        anchors.bottomMargin: menuIconTBMargin
//        color: "#FFF"
//    }

    Image{
        id: icon
        width: menuIconWidth
//        width: 10
        height: menuIconHeight
        source: ""
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.leftMargin: menuIconLRMargin
        anchors.topMargin: menuIconTBMargin +2
        anchors.bottomMargin: menuIconTBMargin +2
    }
    Text{
        id: menuTxt
        width: menuTextWidth
        height: menuTextHeight
        anchors.left: icon.right
        anchors.leftMargin: menuIconLRMargin/2
        verticalAlignment: Text.AlignVCenter
        font.family: menuTextFont
        font.pixelSize: menuTextSize
        color: "#FFF"
        text: menuText
    }
    MouseArea{
        anchors.fill: parent
        hoverEnabled: true
        onEntered:{
            menuTxt.color = hoverColor
           icon.source = String(icon.source).replace("图标白","图标蓝")
        }
        onExited: {
            menuTxt.color = normalColor
            icon.source = String(icon.source).replace("图标蓝","图标白")
        }
    }
}

